<!--
 * @Descripttion: 订单详情
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-02-12 15:02:10
-->
<template>
  <div class="lb-malls-order-detail">
    <top-nav :isBack="true" />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="detail"
        label-width="130px"
        size="mini"
      >
        <lb-classify-title title="用户信息"></lb-classify-title>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <!-- <div class="flex-warp"> -->
        <el-form-item label="用户ID：">
          <div>{{ detail.user_id }}</div>
        </el-form-item>
        <el-form-item label="微信昵称：">
          <div>{{ detail.nickname_text }}</div>
        </el-form-item>
        <el-form-item label="联系电话：">
          <div>{{ detail.phone }}</div>
        </el-form-item>
        <el-form-item label="收货地址：">
          <div>{{ detail.address_text }}</div>
        </el-form-item>
        <!-- </div> -->
        <block v-if="detail.courier_number">
          <lb-classify-title title="物流信息"></lb-classify-title>
          <div class="space-lg"></div>
          <div class="space-lg"></div>
          <el-form-item label="快递单号：">
            <div>{{ detail.courier_number }}</div>
          </el-form-item>
          <el-form-item label="快递公司：">
            <div>{{ detail.express_company }}</div>
          </el-form-item>
          <el-form-item label="查询电话：" v-if="detail.express_phone">
            <div>{{ detail.express_phone }}</div>
          </el-form-item>
          <el-form-item label="物流信息：">
            <div class="flex-warp">
              <lb-button
                class="mr-sm"
                type="primary"
                size="small"
                plain
                @click="showSendDialog"
                >修改物流信息</lb-button
              >
              <lb-button
                type="danger"
                size="small"
                plain
                @click="getExpressInfo(1)"
                v-if="express_type > 0 && detail.Success"
                >更新物流信息</lb-button
              >
            </div>
          </el-form-item>
          <el-form-item label="" v-if="detail.Reason">
            <div>{{ detail.Reason }}</div>
          </el-form-item>
          <el-form-item
            label=""
            v-if="detail.Traces && detail.Traces.length > 0"
          >
            <div>
              <el-timeline :reverse="true">
                <el-timeline-item
                  v-for="(item, index) in detail.Traces"
                  :key="index"
                  :timestamp="item.AcceptTime"
                  :color="index === detail.Traces.length - 1 ? '#409EFF' : ''"
                >
                  {{ item.AcceptStation }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-form-item>
        </block>
        <lb-classify-title title="订单信息"></lb-classify-title>
        <div class="space-lg"></div>
        <div class="space-lg"></div>
        <el-form-item label="系统订单号：">
          <div>{{ detail.out_trade_no }}</div>
        </el-form-item>
        <el-form-item label="商户订单号：" v-if="detail.transaction_id">
          <div>{{ detail.transaction_id }}</div>
        </el-form-item>
        <el-form-item label="下单时间：">
          <div>{{ detail.create_time | handleTime }}</div>
        </el-form-item>
        <el-form-item label="物流方式：">
          <div>{{ detail.address_id === -1 ? '自提' : '物流' }}</div>
        </el-form-item>
        <el-form-item label="订单类型：">
          <div>{{ detail.type === 0 ? '普通订单' : '拼团订单' }}</div>
        </el-form-item>
        <el-form-item label="订单状态：">
          <div>{{ detail.status_text }}</div>
        </el-form-item>
        <el-form-item label="订单金额：">
          <div>{{ `¥${detail.price}` }}</div>
        </el-form-item>
        <el-form-item label="运费：" v-if="detail.freight * 1 > 0">
          <div>{{ `¥${detail.freight}` }}</div>
        </el-form-item>
        <el-form-item label="应付金额：">
          <div>{{ `¥${detail.should_pay}` }}</div>
        </el-form-item>
        <block v-if="detail.integral * 1 > 0">
          <el-form-item label="使用积分：">
            <div class="c-warning">{{ detail.integral }}</div>
          </el-form-item>
          <el-form-item label="积分抵扣：">
            <div class="c-warning">-¥{{ detail.i_price }}</div>
          </el-form-item>
        </block>
        <el-form-item label="会员折扣：" v-if="detail.member_discount_price">
          <div class="c-warning">{{ `-¥${detail.member_discount_price}` }}</div>
        </el-form-item>
        <el-form-item label="批发价折扣：" v-if="detail.sale_discount_price">
          <div class="c-warning">{{ `-¥${detail.sale_discount_price}` }}</div>
        </el-form-item>
        <el-form-item label="卡券优惠：" v-if="detail.record_money * 1 > 0">
          <div class="c-warning">{{ `-¥${detail.record_money}` }}</div>
        </el-form-item>
        <el-form-item label="实付金额：">
          <div>{{ `¥${detail.total_price}` }}</div>
        </el-form-item>
        <el-form-item label="支付方式：">
          <div>{{ detail.stored * 1 > 0 ? '储值支付' : '微信支付' }}</div>
        </el-form-item>
        <el-form-item label="员工：">
          <div>{{ detail.staff_text }}</div>
        </el-form-item>
        <el-form-item label="核销时间：" v-if="detail.hx_time">
          <div>{{ detail.hx_time | handleTime }}</div>
        </el-form-item>
        <el-form-item label="核销人：" v-if="detail.hx_user_text">
          <div>
            {{
              detail.hx_company_text
                ? `${detail.hx_user_text}(${detail.hx_company_text.companyName} ${detail.hx_company_text.departmentName})`
                : `${detail.hx_user_text}`
            }}
          </div>
        </el-form-item>
        <el-form-item label="订单备注：" v-if="detail.remarks">
          <div>{{ detail.remarks }}</div>
        </el-form-item>
      </el-form>

      <div class="mb-lg pb-lg" v-if="detail.help_pay === 1">
        <lb-classify-title title="代付人信息"></lb-classify-title>
        <el-table :data="detail.help_list.data" style="width: 100%">
          <el-table-column label="好友头像" width="180">
            <template slot-scope="scope">
              <lb-image :src="scope.row.avatarUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="好友昵称"> </el-table-column>
          <el-table-column prop="pay_price" label="付款金额">
            <template slot-scope="scope"> ¥{{ scope.row.pay_price }} </template>
          </el-table-column>
          <el-table-column prop="pay_time" label="付款时间"> </el-table-column>
        </el-table>
      </div>

      <lb-classify-title title="所购商品"></lb-classify-title>
      <el-table :data="detail.goods_text" style="width: 100%">
        <el-table-column label="商品图" width="180">
          <template slot-scope="scope">
            <lb-image :src="scope.row.cover" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="content" label="商品规格"> </el-table-column>
        <el-table-column prop="price" label="商品单价">
          <template slot-scope="scope">
            <div>¥{{ (scope.row.price / scope.row.number).toFixed(2) }}</div>
            <div v-if="scope.row.version">
              实付：¥ {{ (scope.row.pay_price / scope.row.number).toFixed(2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="商品数量"> </el-table-column>
      </el-table>
      <span class="count">合计数量: {{ total }}</span>
      <div style="margin-top: 20px">
        <lb-button type="primary" @click="goback">{{
          $t('action.back')
        }}</lb-button>
      </div>
    </div>

    <el-dialog
      title="修改物流信息"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form
        @submit.native.prevent
        :model="sendForm.send"
        :rules="sendFormRules"
        ref="sendForm"
        label-width="80px"
      >
        <el-form-item label="快递单号" prop="express_id">
          <el-input
            v-model="sendForm.send.express_id"
            placeholder="请输入快递单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="shipper_code">
          <el-select
            v-model="sendForm.send.shipper_code"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in expressOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideSendDialog">{{ $t('action.cancel') }}</el-button>
        <el-button type="primary" @click="submitFormInfo('sendForm')">{{
          $t('action.comfirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: '',
      centerDialogVisible: false,
      expressOptions: [{
        key: 'SF',
        value: '顺丰速运'
      },
      {
        key: 'HTKY',
        value: '百世快递'
      },
      {
        key: 'ZTO',
        value: '中通快递'
      },
      {
        key: 'STO',
        value: '申通快递'
      },
      {
        key: 'YTO',
        value: '圆通速递'
      },
      {
        key: 'YD',
        value: '韵达速递'
      },
      {
        key: 'YZPY',
        value: '邮政快递包裹'
      },
      {
        key: 'EMS',
        value: 'EMS'
      },
      {
        key: 'HHTT',
        value: '天天快递'
      },
      {
        key: 'JD',
        value: '京东快递'
      },
      {
        key: 'UC',
        value: '优速快递'
      },
      {
        key: 'DBL',
        value: '德邦快递'
      },
      {
        key: 'ZJS',
        value: '宅急送'
      },
      {
        key: 'TNT',
        value: 'TNT快递'
      },
      {
        key: 'UPS',
        value: 'UPS'
      },
      {
        key: 'DHL',
        value: 'DHL'
      },
      {
        key: 'FEDEX',
        value: 'FEDEX联邦(国内件）'
      },
      {
        key: 'FEDEX_GJ',
        value: 'FEDEX联邦(国际件）'
      }
      ],
      sendForm: {
        order_id: '',
        courier_number: '',
        express_company: '',
        send: {
          express_id: '',
          shipper_code: ''
        }
      },
      sendFormRules: {
        express_id: {
          required: true,
          type: 'string',
          message: '请输入快递单号',
          trigger: 'blur'
        },
        shipper_code: {
          required: true,
          type: 'string',
          message: '请选择快递公司',
          trigger: 'blur'
        }
      },
      express_type: 0,
      total: 0,
      detail: {}
    }
  },
  async created () {
    this.id = this.$route.query.id
    await this.getExpressType()
    this.getOrderInfo()
  },
  methods: {
    arrReduce (arr) {
      let total = 0
      for (let i = 0, len = arr.length; i < len; i++) {
        total += arr[i].number
      }
      this.total = total
    },
    goback () {
      this.$router.back(-1)
    },
    async getExpressType () {
      let { data } = await this.$api.systemExpressInfo()
      this.express_type = data.type || 0
    },
    /**
     * @method 获取订单详情
     */
    async getOrderInfo () {
      let { id } = this
      this.$api.getOrderInfo({ id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          let { data } = res
          this.arrReduce(data.goods_text)
          this.detail = data
          if (data.address_id && data.courier_number) {
            this.getExpressInfo()
          }
        }
      })
    },
    async getExpressInfo (update = 0) {
      let { id } = this
      let { code, data } = await this.$api.orderExpressInfo({ order_id: id, update })
      if (code !== 200) return
      this.detail = Object.assign({}, this.detail, data)
    },
    /**
     * @method 打开修改物流弹框
     */
    showSendDialog () {
      let { id } = this
      let { courier_number: courier, express_company: company, ShipperCode } = this.detail
      this.sendForm = {
        order_id: id,
        courier_number: courier,
        express_company: company,
        send: {
          express_id: courier,
          shipper_code: ShipperCode
        }
      }
      this.centerDialogVisible = true
    },
    /**
     * @method 隐藏修改物流
     */
    hideSendDialog () {
      this.centerDialogVisible = false
    },
    /**
     * @method 修改物流信息
     */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { sendForm } = this
          sendForm.courier_number = sendForm.send.express_id
          sendForm.express_company = this.expressOptions.filter(item => {
            return item.key === sendForm.send.shipper_code
          })[0].value
          this.$api.expressUpdate(sendForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.centerDialogVisible = false
              this.getOrderInfo()
            }
          })
        }
      })
    }

  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-malls-order-detail {
  width: 100%;
  .order-info-box {
    width: 100%;
    margin: 10px 0 30px 0;
    min-width: 400px;
    .info-item {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 10px 0;
      .label {
        color: #aaafbb;
        width: 130px;
        min-width: 130px;
        text-align: right;
        margin-right: 10px;
      }
      .value {
        color: #424753;
      }
      .redColor {
        color: #e95260;
      }
    }
  }
  .info-warper {
    display: flex;
  }
  .el-table {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .count {
    margin-left: 10px;
  }
}
</style>
